<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <title>学工服务</title>
    <link href="http://117.169.48.109:8089/css/base.css" rel="stylesheet" />
    <link href="http://117.169.48.109:8089/css/default/DEKT.css" rel="stylesheet" />
    <link href="http://117.169.48.109:8089/layui/css/layui.css" rel="stylesheet" />
    <link href="http://117.169.48.109:8089/css/themes/default/easyui.css" rel="stylesheet" />
    <link href="http://117.169.48.109:8089/css/themes/icon.css" rel="stylesheet" />
    <link href="http://117.169.48.109:8089/css/mobiscroll.custom-2.5.0.min.css" rel="stylesheet" />
    <script src="http://117.169.48.109:8089/js/newjs/jquery-3.1.1.min.js"></script>
    <script src="http://117.169.48.109:8089/layui/layui.all.js"></script>
    <script src="http://117.169.48.109:8089/js/Public/mobiscroll.custom-2.5.0.min.js?v=1.0.0"></script>
    <script src="http://117.169.48.109:8089/js/WX/pinchzoom.js"></script>
    <script src="http://117.169.48.109:8089/js/PubSHZT/PublicSHZT.js"></script>
    <script src="http://117.169.48.109:8089/js/Public/PublicGetUrlParam.js"></script>
    <script src="http://117.169.48.109:8089/js/FWDT/My97DatePicker/WdatePicker.js"></script>
    <style>

        .tab-content1 {
            background-color: #fff;
            padding: 10px 4%;
        }

            .tab-content1 .tab2 {
                display: none
            }

            .tab-content1 > div {
                width: 100%;
            }

            .tab-content1 .tab1-bt {
                width: 100%;
                padding: 10px 3%;
                box-sizing: border-box;
                box-shadow: 1px 1px 2px 1px #eee;
                border-radius: 6px;
            }

                .tab-content1 .tab1-bt .tab1-bt-title {
                    font-size: 16px;
                    padding: 10px 0;
                    font-weight: bold;
                }

                .tab-content1 .tab1-bt input {
                    width: 100%;
                    height: 32px;
                    line-height: 32px;
                }

                    .tab-content1 .tab1-bt input[type="radio"] {
                        width: 16px;
                        height: 16px;
                        line-height: 16px;
                    }

                    .tab-content1 .tab1-bt input[type="checkbox"] {
                        width: 16px;
                        height: 16px;
                        line-height: 16px;
                    }

                .tab-content1 .tab1-bt select {
                    width: 100%;
                    height: 32px;
                    line-height: 32px;
                }

                .tab-content1 .tab1-bt textarea {
                    width: 100%;
                    height: 100px;
                    border: none;
                }

            .tab-content1 .btn-next {
                width: 92%;
                height: 36px;
                line-height: 36px;
                margin: 15px 4%;
                border-radius: 6px;
                text-align: center;
                color: #fff;
                margin-top: 30px;
                background-color: #ff6501;
            }

        .imgyl-warp .imgyl .pinch-zoom,
        .imgyl-warp .imgyl img {
            width: 100%;
        }

        /*图片上传*/
        .imgUpfile {
            float: left;
            margin-left: 10px;
            margin-bottom: 5px;
        }

            .imgUpfile > span {
                display: block;
                width: 50px;
                height: 21px;
                border-radius: 5px;
                background-color: #e31616;
                margin: 4px auto;
                line-height: 21px;
                color: white;
                text-align: center;
            }

            .imgUpfile > div {
                width: 100%;
                height: 90px;
                border: 1px solid #ccc;
            }

                .imgUpfile > div > p {
                    font-size: 35px;
                    line-height: 83px;
                    text-align: center;
                    vertical-align: middle;
                }
        /*文件上传*/
        .spanUpFile {
            padding: 6px 28px;
            border: 2px solid #b7d2ff;
            border-radius: 10px;
            background-color: #e0ecff;
            font-size: 14px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <input type="file" id="headPortraitUpload" accept="image/*" style="display: none">
    <!--顶部返回按钮区域-->
    <section class="top">
        <a href="javascript:SHEnd()" class="back"></a>
        <p class="top-text">事务详情</p>
    </section>
    <section class="tab-content1" style="margin-top:0;">
        <div class="tab1">
            <div id="table1_content" style="width:100%;overflow:auto;">
                <div id="div_panel"></div>
            </div>
        </div>
    </section>
    <!--图片预览-->
    <div class="imgyl-warp" style="display:none;text-align:center;overflow:hidden;position:fixed;top:0px;left:0px;background-color: rgba(0,0,0,.5);width:100%;height:100%;">
        <div class="imgyl" style="height:inherit;">
            <div class="pinch-zoom">
                <img src="" onclick="imgYlClose(this);" />
            </div>
        </div>
    </div>
    <script>
        try {
            (function ($) {
                var oldHTML = $.fn.html;
                $.fn.formhtml = function () {
                    var sAgent = navigator.userAgent.toLowerCase();
                    if (/*@cc_on!@*/false && sAgent.indexOf("mac") == -1) {
                        return this[0].innerHTML;
                    }
                    if (arguments.length) return oldHTML.apply(this, arguments);
                    $("input,textarea,button", this).each(function () {
                        if (this.tagName.toLowerCase() == 'textarea')
                            this.innerText = this.value;
                        this.setAttribute('value', this.value);
                    });
                    $(":radio,:checkbox", this).each(function () {
                        if (this.checked) this.setAttribute('checked', 'checked');
                        else this.removeAttribute('checked');
                    });
                    $("option", this).each(function () {
                        if (this.selected) this.setAttribute('selected', 'selected');
                        else this.removeAttribute('selected');
                    });
                    return oldHTML.apply(this);
                };
            })(jQuery);
        } catch (e) {
        }


        var DJID = GetUrlParam("DJID");
        var DJLX = unescape(GetUrlParam("DJLX"));
        var XSDM = GetUrlParam("XSDM");
        var IsFQR = GetUrlParam("IsFQR");
        var IsTH = GetUrlParam("IsTH");
        var SHJG = unescape(GetUrlParam("SHJG"));//SHJG 等于 shzt
        var PDLXID = GetUrlParam("PDLXID");//传回去要用的
        var PDLXMC = unescape(GetUrlParam("PDLXMC"));//传回去要用的
        var KZDM = GetUrlParam("KZDM");//传回去要用的KZDM
        var UserAgent = GetUrlParam("UserAgent");//pc端和移动端 默认为移动端

        var KXZD = "";//可选字段
        var Create_BillCode = "";
        var TJZD = "";//条件字段
        var PDLXID = "";
        $(function () {
            var v_height = $(window).height();
            $("#table1_content").height(v_height - 150);
            LoadHtml(DJID, DJLX, XSDM, IsFQR);
        })
        function LoadHtml(DJID, DJLX, XSDM, IsFQR) {
            $.ajax({
                url: '../json/4.json',
                type: 'get',
                data: { DJID: DJID, XSDM: XSDM, UserAgent: UserAgent },
                dataType: 'json',
                success: function (data) {
                    //$(".tab1").html(data.rows[0].html);
                    $("#div_panel").html(data.rows[0].html);
                    START_X = Math.round((window.innerWidth - el.offsetWidth - 100) / 2);
                    START_Y = Math.round((window.innerHeight - el.offsetHeight - 100) / 2);
                    resetElement();
                    KXZD = data.rows[0].kxzd;
                    TJZD = data.rows[0].tjzd;
                    PDLXID = data.rows[0].PDLXID;
                    Create_BillCode = data.rows[0].Create_BillCode;
                    //if (IsFQR == "1" && SHJG != "已办结") {
                    //    $(".tab1").append('<button class="btn-next" id="btnNext" onclick="SH()">送审</button>');
                    //}
                    if (IsFQR == "1" && SHJG != "3" && SHJG != "4") {
                        $(".tab1").append('<button class="btn-next" id="btnNext" onclick="SH()">送审</button>');
                    }
                    //日期控件
                    var curr = new Date().getFullYear();
                    var month = new Date().getMonth();
                    var day = new Date().getDate();
                    $("input[zx^=rqkj_]").each(function myfunction() {
                        var zx = $(this).attr("zx").split('_')[1];
                        var zxs = zx.split(' ');
                        var timeFormat = "HH:ii";
                        var dateFormat = zxs[0].toLowerCase();
                        if (zxs.length == 1) {
                            timeFormat = "";
                        }

                        $(this).mobiscroll().datetime({
                            theme: 'android-ics light',
                            mode: 'scroller',
                            display: 'bottom',
                            lang: 'zh',
                            setText: '确定',
                            cancelText: '取消',
                            dayText: '日',
                            monthText: '月',
                            yearText: '年',
                            hourText: '时',
                            minuteText: '分',
                            startYear: curr - 10,
                            endYear: curr + 10,
                            timeFormat: timeFormat,
                            timeWheels: timeFormat,
                            dateFormat: dateFormat,
                            dateOrder: 'yymmdd'
                        });
                    })

                    //删除 pc端的样式
                    //$(".tab1 input").removeAttr("style");
                    //$(".tab1 select").removeAttr("style");
                    //$(".tab1 textarea").removeAttr("style");
                    //禁用
                    disabledTrue();
                    ////控件样式。
                    //$(".tab1 input[type='text']").css("width", "100%");
                    //$(".tab1 input[type='text']").css("height", "32px");
                    //$(".tab1 input[type='text']").css("line-height", "32px");
                    //$(".tab1 input[type='radio']").css("width", "16px");
                    //$(".tab1 input[type='radio']").css("height", "16px");
                    //$(".tab1 input[type='radio']").css("line-height", "16px");
                    //$(".tab1 input[type='checkbox']").css("width", "16px");
                    //$(".tab1 input[type='checkbox']").css("height", "16px");
                    //$(".tab1 input[type='checkbox']").css("line-height", "16px");
                    //$(".tab1 select").css("width", "100%");
                    //$(".tab1 select").css("height", "32px");
                    //$(".tab1 select").css("line-height", "32px");
                    //$(".tab1 textarea").css("width", "100%");
                    //$(".tab1 textarea").css("height", "100px");
                    //$(".tab1 textarea").css("border", "none");
                }
            });
        }
        //将控件解禁
        function disabledFalse() {
            $(".tab1 input").each(function (index, value) {
                value.disabled = false;
                $(value).removeAttr("placeholder");
            })
            $(".tab1 select").each(function (index, value) {
                value.disabled = false;
            })
            $(".tab1 textarea").each(function (index, value) {
                value.disabled = false;
                $(value).removeAttr("placeholder");
            })
        }
        //禁用
        function disabledTrue() {
            $(".tab1 input").each(function (index, value) {
                if (KXZD.indexOf($(value).attr("name")) < 0) {
                    value.disabled = true;
                } else {
                    value.disabled = false;
                }
            })
            $(".tab1 textarea").each(function (index, value) {
                if (KXZD.indexOf($(value).attr("name")) < 0) {
                    value.disabled = true;
                } else {
                    value.disabled = false;
                }
            })
            $(".tab1 select").each(function (index, value) {
                if (KXZD.indexOf($(value).attr("name")) < 0) {
                    value.disabled = true;
                } else {
                    value.disabled = false;
                }
            })
        }
        function IsOK() {
            var isok = true;

            if (isok) {
                $(".tab1 input[type='text'][sfbt='0'][disabled!='disabled']").each(function (i, v) {
                    if (v.value.trim() == "") {
                        alert($(v).attr("names") + " ,不能为空!");
                        isok = false;
                        return false;
                    }
                })
            }
            if (isok) {
                $(".tab1 input[type='radio'][sfbt='0'][disabled!='disabled']").each(function (i, v) {
                    if ($("input[type='radio'][name='" + $(v).attr("name") + "']:checked").length == 0) {
                        alert($(v).attr("names") + " ,请勾选!");
                        isok = false;
                        return false;
                    }
                })
            }
            if (isok) {
                $(".tab1 input[type='checkbox'][sfbt='0'][disabled!='disabled']").each(function (i, v) {
                    if ($("input[type='checkbox'][name='" + $(v).attr("name") + "']:checked").length == 0) {
                        alert($(v).attr("names") + " ,请勾选!");
                        isok = false;
                        return false;
                    }
                })
            }
            if (isok) {
                $(".tab1 select[sfbt='0'][disabled!='disabled']").each(function (i, v) {
                    if (v.value == "0" || v.value == "请选择") {
                        alert($(v).attr("names") + " ,请选择!");
                        isok = false;
                        return false;
                    }
                })
            }
            if (isok) {
                $(".tab1 textarea[sfbt='0'][disabled!='disabled']").each(function (i, v) {
                    if (v.value.trim() == "") {
                        alert($(v).attr("names") + " ,不能为空!");
                        isok = false;
                        return false;
                    }
                })
            }

            return isok;
        }
        //保存填写的html
        function Submit() {
            var isok = IsOK();
            if (!isok)
                return false;
            disabledFalse();
            var html = $(document.getElementsByClassName("tab1")).formhtml();
            $.ajax({
                type: "POST",
                data: { html: encodeURI(html), PDLXID: PDLXID, KXZD: KXZD, TJZD: TJZD, Create_BillCode: Create_BillCode, IsSave: "0", UserAgent: UserAgent },
                url: '../weixinYX/ashx/XGFW.ashx?type=SaveData',
                dataType: "text",
                async: false,
                success: function (data) {
                }
            });
        }
        //审核
        function SH() {
            Submit();
            disabledTrue();
            PublicOpenSH(DJID, DJLX, IsFQR);
        }
        //审核结束 返回上一层
        function SHEnd() {
            //top.window.location.href = "XGFW_index.html?PDLXID=" + PDLXID + "&KZDM=" + KZDM + "&isContinue=1";
            window.location.href = "XGFW_index.html?PDLXID=" + PDLXID + "&PDLXMC=" + escape(PDLXMC) + "&UserAgent=" + UserAgent + "&KZDM=" + KZDM + "&isContinue=1";
        }
        //}
        //文件上传
        var layerOpen;
        function UpFile(obj) {
            var row = $(obj).attr('row');
            layerOpen = layer.open({
                type: 2,
                title: "文件上传",
                //skin: 'layui-layer-rim', //加上边框
                area: ['90%', '80%'], //宽高
                content: 'XGFW_UpFile.html?Create_BillCode=' + Create_BillCode + '&row=' + row + '&xsdm='
            });
        }
        function CloseOpen() {
            layer.close(layerOpen);
        }

        //照片预览
        function OpenImg(id, type) {
            if (type == "1") {
                imgYl(id.src);
            } else {
                $.ajax({
                    type: "POST",
                    data: { ID: id },
                    url: 'http://117.169.48.109:8089/weixinYX/ashx/XGFW.ashx?type=OpenImg',
                    dataType: "text",
                    success: function (data) {
                        if (data == "noImg") {
                            alert("不是图片格式，暂不支持预览");
                        } else if (data == "Exists") {
                            alert("文件不存在或已删除");
                        } else {
                            imgYl(data)
                        }
                    }
                });
            }

        }
        //照片预览
        function imgYl(img) {
            $(".imgyl-warp").show();
            var winH = $(window).height();
            var winW = $(window).width();
            $(".imgyl-warp .pinch-zoom img").attr("src", img);
            //照片预览初始化
            pinchZoom();
            setTimeout(function () {
                var imgYlH = $(".imgyl-warp .imgyl img").height();
                if (winH - imgYlH > 0) {
                    $(".imgyl-warp .pinch-zoom img").css("margin-top", (winH - imgYlH) / 2);
                } else {
                    $(".imgyl-warp .pinch-zoom").css("height", "100%");
                    $(".imgyl-warp .pinch-zoom img").css("height", "100%");
                }
            }, 0)
        }
        function pinchZoom() {
            //图片放大缩小
            $('div .pinch-zoom').each(function () {
                new RTP.PinchZoom($(this), {});
            });
        }
        //图片预览关闭
        function imgYlClose(obj) {
            $(obj).parents(".imgyl-warp").hide();
            $(".imgyl-warp .imgyl .pinch-zoom-container").remove();
            $(".imgyl-warp .imgyl").html('<div class="pinch-zoom"><img src = "" onclick = "imgYlClose(this);" /></div>')
        }

        /*图片上传*/
        var imgDivName = "";
        function ChooseImage(obj) {
            $("#headPortraitUpload").change(function () {
                cutImageBase64(this);
            })
            imgDivName = $(obj).parent().parent()[0].id;
            document.getElementById("headPortraitUpload").click();
        }
        function cutImageBase64(obj) {
            if (window.FileReader) {
                var fileReader = new FileReader();
                fileReader.readAsDataURL(obj.files[0]);
                fileReader.onloadend = function (e) {
                    $("input[name='" + imgDivName.substring(4) + "']").val(fileReader.result);
                    $("#" + imgDivName + ">div").html('<img src="' + fileReader.result + '" width="' + $("#" + imgDivName + ">div").width() + '" height="' + $("#" + imgDivName + ">div").height() + '" />');
                }
            }
        }
        //图片删除
        function imgDel(obj) {
            $(obj).prev().html('<p onclick = "ChooseImage(this)">+</p>');
            $("input[name='" + imgDivName.substring(4) + "']").val('');
            document.getElementById("headPortraitUpload").value = "";
            imgDivName = "";
        }
    </script>
    <script type="text/javascript" src="http://117.169.48.109:8089/js/hammer.min.js"></script>
    <script>
        var reqAnimationFrame = (function () {
            return window[Hammer.prefixed(window, 'requestAnimationFrame')] || function (callback) {
                window.setTimeout(callback, 1000 / 60);
            };
        })();

        var el = document.querySelector("#div_panel");

        var START_X = -el.offsetWidth;// Math.round((window.innerWidth - el.offsetWidth) / 2);
        var START_Y = -el.offsetHeight;// Math.round((window.innerHeight - el.offsetHeight) / 2);

        var ticking = false;
        var transform;   //图像效果
        var timer;
        var initAngle = 0;  //旋转角度
        var initScale = 0.5;  //放大倍数

        var mc = new Hammer.Manager(el);   //用管理器  可以同时触发旋转 拖拽  移动
        //var mc = new Hammer(el);	      //旋转和移动互斥
        /**
        ev.srcEvent.type  touchstart  touchend touchmove
        ev.deltaX  手势移动位移变量
        */
        mc.add(new Hammer.Pan({ threshold: 0, pointers: 0 }));
        mc.add(new Hammer.Rotate({ threshold: 0 })).recognizeWith(mc.get('pan'));
        mc.add(new Hammer.Pinch({ threshold: 0 })).recognizeWith([mc.get('pan'), mc.get('rotate')]);
        //结束时做一些处理
        mc.on("hammer.input", function (ev) {
            if (ev.isFinal) {
                console.log(START_X + "  " + transform.translate.x + "   " + ev.deltaX);
                START_X = transform.translate.x;
                START_Y = transform.translate.y;
            }

        });
        mc.on("panstart panmove", onPan);
        //mc.on("rotatestart rotatemove rotateend", onRotate);
        mc.on("pinchstart pinchmove", onPinch);

        /**
        第二次进入拖拽时  delta位移重置
        移动时 初始位置startxy不动。delta增加
        */
        function onPan(ev) {
            if (!ev.isFinal) {
                el.className = '';
                console.log(START_X + "  " + START_Y + " |  " + ev.deltaX + "  " + ev.deltaY);
                transform.translate = {
                    x: START_X + ev.deltaX,
                    y: START_Y + ev.deltaY
                };
                requestElementUpdate();
            }
        }

        function onPinch(ev) {
            if (ev.type == 'pinchstart') {
                initScale = transform.scale || 1;
            }
            el.className = '';
            transform.scale = initScale * ev.scale;
            requestElementUpdate();
        }

        //旋转相关
        var preAngle = 0;
        var tempAngleFlag = 0;
        var deltaAngle = 0;
        var startRotateAngle = 0;

        function onRotate(ev) {

            //点下第二个触控点时触发
            if (ev.type == 'rotatestart') {
                startRotateAngle = ev.rotation;
                tempAngleFlag = 0;
            }
            if (ev.type == 'rotatemove') {
                if (tempAngleFlag == 0) {
                    preAngle = startRotateAngle;
                    tempAngleFlag++;
                } else {
                    deltaAngle = ev.rotation - preAngle;
                    el.className = '';
                    transform.rz = 1;  //非0  垂直xy轴
                    transform.angle = initAngle + deltaAngle;
                    requestElementUpdate();
                }
            }

            //旋转结束  记录当前图片角度
            if (ev.type == 'rotateend') {
                initAngle = transform.angle;
            }
        }


        function updateElementTransform() {
            var value = [
                'translate3d(' + transform.translate.x + 'px, ' + transform.translate.y + 'px, 0)',
                'scale(' + transform.scale + ', ' + transform.scale + ')',
                'rotate3d(' + transform.rx + ',' + transform.ry + ',' + transform.rz + ',' + transform.angle + 'deg)'
            ];

            value = value.join(" ");
            el.style.webkitTransform = value;  /*为Chrome/Safari*/
            el.style.mozTransform = value; /*为Firefox*/
            el.style.transform = value; /*IE Opera?*/
            ticking = false;
        }

        function requestElementUpdate() {
            if (!ticking) {
                reqAnimationFrame(updateElementTransform);
                ticking = true;
            }
        }

        /**
        初始化设置
        */
        function resetElement() {
            var tables = document.getElementById("div_panel").getElementsByTagName("table");
            if (tables.length == 0) {
                return false;
            }
            el.className = 'animate';
            transform = {
                translate: { x: START_X, y: START_Y },
                scale: 0.4,
                angle: 0,
                rx: 0,
                ry: 0,
                rz: 0
            };
            requestElementUpdate();
        }
            //hammertime.get('rotate').set({ enable: false });


    </script>
</body>
</html>